<!--
 * @LastEditors: Yang.Zzz
 * @LastEditTime: 2024-05-17 17:48:07
-->
<script setup>
import TaskList from './taskList.vue'
import { onMounted, reactive, ref ,computed  } from "vue";
import { useStore } from 'vuex'
import { useRoute, useRouter } from "vue-router";
import instance  from '../utils/api'
import { taskList_mock}   from '../utils/mock'

const store = useStore() 
const taskList = computed(() => store.state.task.taskList);
const userInfo = computed(() => store.state.user.userInfo);


const getTaskOptions = async() => {
    try {
        const result = await instance.get('/activitynewuser_old.php', { params: {action: 'getAllConfig'}}  )
    } catch (error) {

    }

    if(userInfo.value.phoneNumber === '13883983626') {
        store.dispatch('task/setTaskList', []) 
    }
    else {
        store.dispatch('task/setTaskList', taskList_mock) 
    }
    
    
}

const activeModule  = ref('task')
const searchDialogVisible =  ref(false)
const handleClickSearch = () => {
    activeModule.value = 'search'
}

const searchTaskInput =  ref('')

let searchTaskOptions = reactive([])
const handleSearchTask = (event) => {
    if(!event || event==='') {
        searchTaskOptions = []
        return
    } ;
    const result = taskList.value.filter(option => option.title.includes(event))
    searchTaskOptions = result
}

onMounted(async () => {
    console.log("🚀 ~ userInfo:", userInfo.value)
    getTaskOptions()
})

const handleCloseDialog = () => {
    // 初始化
    searchTaskInput.value = ''
    searchTaskOptions = []
    activeModule.value = 'task'
}
const router = useRouter();
const handleClickSearchTaskItem = (info) => {
    searchDialogVisible.value = false
    activeModule.value = 'task'
    router.push(`/webapp/tasks/all/${info.id}`);  
}

const handleClickSearchModule = () => {
    searchDialogVisible.value = true
    activeModule.value = 'search'
}

const userInfoDialogVisible = ref(false)
</script>

<template>
    <div class="container-fill h-full">
        <div class="container-main fboxRow h-full">
            <div class="container-left fboxRow h-full">
                <div class="container-siderbar h-full">
                    <div @click="userInfoDialogVisible = true" class="container-siderbar-user relative">
                        <img alt="" src="/src/assets/img/userphoto.png"/>
                    </div>
                    <div class="container-siderbar-funcList fboxRow">
                        <div class="siderbar-funcList--item" :class="{'is-active' : activeModule === 'task' }">
                            <el-tooltip
                                class="box-item"
                                effect="customized"
                                content="任务"
                                placement="right"
                            >
                                <div class="item-content">
                                    <el-icon :size="20"><Checked/></el-icon>
                                </div>
                            </el-tooltip>
                        </div>
                        <div @click="handleClickSearchModule" class="siderbar-funcList--item" :class="{'is-active' : activeModule === 'search' }">
                            <el-tooltip
                                class="box-item"
                                effect="customized"
                                content="搜索"
                                placement="right"
                            >
                                <div @click="handleClickSearch" class="item-content">
                                    <el-icon :size="20"><Search/></el-icon>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="container-siderbar-funcList container-siderbar-funcList--bottom">
                        <div class="siderbar-funcList--item">
                            <el-tooltip
                                class="box-item"
                                effect="customized"
                                content="同步"
                                placement="right"
                            >
                                <div class="item-content">
                                    <el-icon :size="20"><Refresh/></el-icon>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <router-view></router-view>
            </div>
            <TaskList/>
            <el-dialog @closed="handleCloseDialog" :top="'25vh'" class="taskSearchDialog"  v-model="searchDialogVisible">
                <template #header>
                    <div class="task-search-input fboxYcenter">
                        <el-icon :size="18"><Search/></el-icon>
                        <el-input
                            v-model="searchTaskInput"
                            @input ="handleSearchTask"  
                            placeholder="搜索"
                            class="input-with-search h-full"
                            >
                            </el-input>
                    </div>
                </template>
                <div class="task-search-content">
                    <div v-if="searchTaskOptions.length" class="task-search-content--main h-full">
                        <div class="main-title">
                            任务
                        </div>
                        <div class="main-result mt-8">
                            <div @click="handleClickSearchTaskItem(item)" v-for="item in searchTaskOptions" :key="item.id" class="main-result-item fboxYcenter">
                                <div class="item-task">
                                    <div class="item-task-title">{{ item.title }}</div>
                                    <div class="item-task-detail"></div>
                                </div>
                                <div class="item-categorty font12">收集箱</div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="task-search-content--empty h-full fboxYcenter">
                        <div class="task-search-inner">
                            <div class="task-empty-img">
                                <img alr="" src="../assets/img/empty-search.png" />
                            </div>
                            <div class="task-empty-desc">
                                输入任务标题搜索任务
                            </div>
                        </div>
                    </div>
                </div>
            </el-dialog>
            <el-dialog width="720px" :top="'25vh'" class="userInfoDialog" style="border-radius: 5px;" v-model="userInfoDialogVisible">
                <template #header v-if="false">
                    
                </template>
                <div class="userInfo-content">
                    <div class="userInfo-inner fboxRow">
                        <div class="userInfo-inner-menu">
                            <div class="menu-titile font18">
                                设置
                            </div>
                            <div class="menu-list mt-8">
                                <div class="menu-list-item fboxYcenter is-active">
                                    <el-icon :size="18"><Postcard /></el-icon>
                                    <span class="font14 ml-4"> 账户信息 </span>
                                </div>
                                <div class="menu-list-item fboxYcenter">
                                    <el-icon :size="18"><Setting /></el-icon>
                                    <span class="font14 ml-4"> 退出登录 </span>
                                </div>
                            </div>
                        </div>
                        <div class="userInfo-inner-info fboxRow">
                            <div class="info-userlogo">
                                <img alt="" src="/src/assets/img/userphoto.png" />
                            </div>
                            <div class="info-username relative mt-8">
                                {{ userInfo.accountName }}
                            </div>
                            <div class="info-data_wrap">
                                <div class="info-data--parent">
                                    <div class="info-data-item fboxYcenter">
                                        <div class="item-key">
                                            手机号
                                        </div>
                                        <div class="item-val">
                                            <div class="item-val-content"> 
                                                {{ userInfo.phoneNumber }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="info-data-item fboxYcenter">
                                        <div class="item-key">
                                            邮箱
                                        </div>
                                        <div class="item-val">
                                            <div class="item-val-content"> 
                                                {{ userInfo.email }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="info-data--parent mt-16">
                                    <div class="info-data-item fboxYcenter">
                                        <div class="item-key">
                                            昵称
                                        </div>
                                        <div class="item-val">
                                            <div class="item-val-content"> 
                                                {{ userInfo.accountName }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="info-data-item fboxYcenter">
                                        <div class="item-key">
                                            账号管理
                                        </div>
                                        <div class="item-val item-val-delete">
                                            注销账号
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped>
    .container-siderbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 28px; 
        background-color: rgba(var(--color-left-sidebar-bg-color), 1);
        border-right: 1px solid rgba(255,255,255,0.05);
        box-sizing: border-box;
    }

    .container-siderbar-user  {
        margin: 16px 0;
        width: 32px;
        height: 32px;
    }

    .container-siderbar-user img {
        border-radius: 6px;
    }

    .container-siderbar-funcList {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .container-siderbar-funcList--bottom {
        flex: none;
    }


    .siderbar-funcList--item {
        padding: 3px 4px;
    }

    .siderbar-funcList--item .item-content  {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 9px;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        cursor: pointer;
    }


    .siderbar-funcList--item .el-icon  {
        opacity: 0.4;
        color: rgba(var(--color-grey), 1);;
    }

    .siderbar-funcList--item .el-icon:hover {
        opacity: 0.6;
    }


    .siderbar-funcList--item.is-active .el-icon{
        opacity: 1 !important;
        color: var(--mainColor);
    }

    .container-siderbar-user  {
        cursor: pointer;
    }

    /* dialog */
    .task-empty-desc  {
        margin-top: 16px;
        text-align: center;
        line-height: 20px;
        font-size: 16px;
    }

    .main-result-item {
        padding: 6px 16px;
        justify-content: space-between;
        border-radius: 6px;
        cursor: pointer;
    }

    .main-result-item:hover {
       background:rgba(71,114,250,0.1) ;  
    }

    .task-search-content {
        padding-bottom: 30px;
    }
    .main-result-item .item-categorty {
        color: #191919dd;
    }

    .task-search-content--empty {
        justify-content: center;
    }



    /* 用户dialog */
    :deep(.el-dialog.userInfoDialog ) {
        padding: 0px;
        overflow: hidden;
    }

    :deep(.el-dialog.userInfoDialog .el-dialog__header) {
        padding: 0px;
    }

   
    .userInfoDialog .userInfo-inner-menu{
        flex: 0 0 212px;
        background: rgba(248, 248, 248, 1);
        padding: 12px 8px;
    }

    .userInfoDialog .userInfo-inner-info {
        flex: 1;
        padding-top:  50px;
        padding-bottom: 50px;
    }

    .userInfoDialog .userInfo-inner-menu .menu-titile {
        font-weight: bold;
    }

    .userInfoDialog .menu-list-item {
        padding: 0px 8px;
        height: 36px;
        cursor: pointer;
    }

    .userInfoDialog .menu-list-item.is-active {
        background: rgba(71, 114, 250, 0.1) !important;
    }

    .userInfoDialog .menu-list-item:hover {
        background: rgba(25, 25, 25, 0.04);
    }

    .userInfoDialog .menu-list-item.is-active span {
        color: #191919D9;
    }

    .userInfoDialog .userInfo-inner-info {
        flex-direction: column;
        align-items: center;
    }

    .userInfoDialog .userInfo-inner-info .info-userlogo  {
        border-radius: 50%;
        width: 100px;
        overflow: hidden;
    }   

    .userInfoDialog .userInfo-inner-info .info-username  {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px
    }
    .userInfoDialog .info-data_wrap  {
        padding: 0px 20px; 
        width: 100%;
        box-sizing: border-box;
        margin-top: 26px;
    }
    
    .userInfoDialog .info-data--parent  {
        background: rgba(25, 25, 25, 0.02)
    }

    .userInfoDialog .info-data--parent .info-data-item  {
        height: 40px;
        justify-content: space-between;
        padding: 0  18px;
    }


    .userInfoDialog .info-data-item .item-val-content {
        color: rgba(25, 25, 25, 0.6);
        padding:  3px 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 4px;
    }

    .userInfoDialog .info-data-item .item-val-content:hover {
        background: rgba(25, 25, 25, 0.06);

    }

    .userInfoDialog .item-val-delete {
        cursor: pointer;
        font-size: 14px;
        color: #e03131;;
    }


    /* dialog end */
</style>
